<template>
	<view class="header">
		<image class="logo" src="/static/login/logo.png"></image>
		<view class="name-container">
			<view class="name-zh">
				上海展天地理云教学互动系统
			</view>
			<view class="name-en">
				Shanghai Zhantian Geography cloud teaching interactive system
			</view>
		</view>

		<view class="search-container">
			<uni-icons type="search" size="2vw" color="rgba(255,255,255,0.9)"></uni-icons>
			<input type="text" placeholder="请输入要查询的关键字" confirm-type="search" v-model="searchText"
				@confirm="confirmSearch">
			<uni-icons v-if="searchText" @click="closeempty" type="closeempty" size="1.5vw"
				color="rgba(255,255,255,0.7)" class="closeempty"></uni-icons>
		</view>

		<view class="user-container">
			<image class="profile" src="/static/header/profile.png"></image>
			<view class="user_name">{{$store.state.session.userName}}</view>
			<image class="setting" :class="{focused:showSetting}" src="/static/header/setting.png"
				@click="showSetting=!showSetting"></image>

			<view v-show="showSetting" class="setting-options" @click="showSetting=false">
				<view class="setting-options-item" @click="openPasswordPopup">
					<image class="setting" mode="aspectFit" src="/static/header/password.png"></image>
					修改密码
				</view>

				<view class="setting-options-item" @click="logout">
					<image class="setting" mode="aspectFit" src="/static/header/logout.png"></image>
					切换登录
				</view>

				<view class="setting-options-item" @click="clearStorage">
					<image class="setting" mode="aspectFit" src="/static/header/clear_storage.png"></image>
					清除缓存
				</view>
			</view>
			<view v-show="showSetting" class="setting-options-cover" @click="showSetting=false"></view>
		</view>

		<uni-popup ref="popup" type="center" :mask-click="false">
			<ChangePassword @close="closePasswordPopup"></ChangePassword>
		</uni-popup>
	</view>
</template>

<script>
	import ChangePassword from "./ChangePassword";
	export default {
		components: {
			ChangePassword
		},
		data() {
			return {
				searchText: "",
				showSetting: false,
			}
		},
		mounted() {},
		methods: {
			confirmSearch() {
				this.$emit("confirmSearch");
			},
			closeempty() {
				this.searchText = "";
				this.confirmSearch();

			},
			openPasswordPopup() {
				this.$refs.popup.open();
			},
			closePasswordPopup() {
				this.$refs.popup.close();
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: "是否退出当前账号？",
					success: (res) => {
						if (res.confirm) {
							this.$store.commit("logout");
						}
					}
				});
			},
			clearStorage() {
				uni.showModal({
					title: '提示',
					content: "清除缓存后需要重新登录，是否继续？",
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							this.$store.commit("logout");
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		// height: 6vw;
		background-color: #2380E9;
		display: flex;
		align-items: center;
		padding: 0 2vw;

		.logo {
			width: 5.2vw;
			height: 4.5vw;
		}

		.name-container {

			$zhHeight: 2vw;
			$enHeight: 1vw;

			color: #fff;
			margin-left: 1vw;
			position: relative;
			height: 3vw;

			.name-zh {
				font-size: 1.8vw;
				letter-spacing: 0.2vw;
				height: $zhHeight;
				line-height: $zhHeight;
			}

			//通过缩放方式，解决font-size无法小于12px的问题
			.name-en {
				font-size: 1.7vw;
				height: $enHeight * 2;
				line-height: $enHeight * 2;
				white-space: nowrap;
				position: absolute;
				left: 50%;
				transform: translateX(-50%) scale(0.5);
			}

		}

		.search-container {
			border-radius: 2vw;
			border: 0.2vw solid rgba(255, 255, 255, 0.5);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0.2vw 1vw;
			margin-left: 4vw;
			position: relative;

			input {
				margin: 0 0.5vw;
				width: 25vw;
				font-size: 1.4vw;
				color: #fff;

				.input-placeholder {
					color: rgba(255, 255, 255, 0.5);
				}
			}

			.closeempty {
				position: absolute;
				right: 0.6vw;
			}
		}

		.user-container {
			display: flex;
			align-items: center;
			margin-left: auto;
			position: relative;

			.profile {
				width: 3vw;
				height: 3vw;
			}

			.user_name {
				height: 3vw;
				line-height: 3vw;
				font-size: 1.4vw;
				margin-left: 1vw;
				margin-right: 2vw;
				color: #fff;
				max-width: 18vw;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.setting {
				width: 3vw;
				height: 3vw;
				position: relative;

				&.focused {
					background-color: #166DCE;
					z-index: 11; //大于setting-options-cover
				}
			}

			.setting-options {
				position: absolute;
				z-index: 11; //大于setting-options-cover
				top: 110%;
				right: -1vw;
				background-color: #fff;
				color: #666;
				font-size: 1.2vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 0.5vw;

				box-shadow: rgba(0, 0, 0, 0.24) 0px 0.15vw 0.4vw;

				.setting-options-item {
					height: 4vw;
					width: 12vw;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 2vw;
						height: 2vw;
						margin-right: 1vw;
					}
				}
			}

			.setting-options-cover {
				position: fixed;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				z-index: 10;
			}
		}

	}
</style>